<template>
    <div class="home">
        <div class="box">
            <div class="box-text-1">hello !</div>
            <div class="box-text-2">{{ titleText }}</div>

            <el-form 
                v-if="showType == 'login'"
                ref="ruleFormRef1"
                :model="formData1" 
                :rules="rules1"
                label-width="auto"
                status-icon
            >
                <el-form-item 
                    label=""
                    prop="account"
                >
                    <el-input 
                        v-model="formData1.account" 
                        :prefix-icon="User"
                        size="large"
                        placeholder="请输入账号"
                    />
                </el-form-item>
                <el-form-item 
                    label=""
                    prop="password"

                >
                    <el-input 
                        v-model="formData1.password" 
                        :prefix-icon="Lock"
                        size="large"
                        type="password"
                        show-password
                        placeholder="请输入密码"
                    />
                </el-form-item>
                <el-form-item 
                    label=""
                    prop="captcha"
                >
                    <el-input 
                        v-model="formData1.captcha" 
                        :prefix-icon="Monitor"
                        size="large"
                        placeholder="请输入验证码"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button 
                        type="primary" 
                        @click="onSubmit1(ruleFormRef1)"
                    >
                        登录
                    </el-button>
                </el-form-item>
                <div class="login-text-box">
                    <div 
                        class="login-text"
                        @click="showType = 'register'; titleText = '注册'"
                    >
                        注册
                    </div>
                    <!-- <div 
                        class="login-text"
                        @click="showType = 'modify'; titleText = '修改密码'"
                    >
                        修改密码
                    </div>
                    <div 
                        class="login-text"
                        @click="showType = 'forget'; titleText = '忘记密码'"
                    >
                        忘记密码
                    </div> -->
                </div>
                
            </el-form>
            <el-form 
                v-else-if="showType == 'register'"
                ref="ruleFormRef2"
                :model="formData2" 
                :rules="rules2"
                label-width="auto"
                status-icon
            >
                <el-form-item 
                    label=""
                    prop="account"
                >
                    <el-input 
                        v-model="formData2.account" 
                        :prefix-icon="User"
                        size="large"
                        placeholder="请输入账号"
                    />
                </el-form-item>
                <el-form-item 
                    label=""
                    prop="phone"
                >
                    <el-input 
                        v-model="formData2.phone" 
                        :prefix-icon="Phone"
                        size="large"
                        maxlength="11"
                        placeholder="请输入手机号"
                    >
                        <template #append>
                            <el-button 
                                type="primary" 
                                :disabled="captchaText != '获取验证码'"
                                @click="getCaptcha"
                            >
                                {{ captchaText }}
                            </el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item 
                    label=""
                    prop="captcha"
                >
                    <el-input 
                        v-model="formData2.captcha" 
                        :prefix-icon="Monitor"
                        size="large"
                        placeholder="请输入验证码"
                    />
                </el-form-item>
                <el-form-item 
                    label=""
                    prop="password"

                >
                    <el-input 
                        v-model="formData2.password" 
                        :prefix-icon="Lock"
                        size="large"
                        type="password"
                        show-password
                        placeholder="请输入密码"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button 
                        type="primary" 
                        @click="onSubmit2(ruleFormRef2)"
                    >
                        注册
                    </el-button>
                </el-form-item>
                <div class="login-text-box">
                    <div 
                        class="login-text"
                        @click="showType = 'login'; titleText = '登录'"
                    >
                        登录
                    </div>
                    <!-- <div 
                        class="login-text"
                        @click="showType = 'modify'; titleText = '修改密码'"
                    >
                        修改密码
                    </div>
                    <div 
                        class="login-text"
                        @click="showType = 'forget'; titleText = '忘记密码'"
                    >
                        忘记密码
                    </div> -->
                </div>
                
            </el-form>
        </div>
        
    </div>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { HAGBTXXApi } from '@/apis'
    import { isPhone } from '@/utils/utils'

    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
    } from '@element-plus/icons-vue'
    
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const { isLocked } = storeToRefs(store)
	const avatarImage = new URL('@/assets/img/avatar/avatar.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const titleText: Ref<string> = ref('欢迎来到Vue Admin！')
    const showType = ref<string>('login') //register, modify, forget
    const captchaText = ref<string>('获取验证码')
    // const captchaNum = ref<number>(60)

    const ruleFormRef1 = ref<any>()
    const ruleFormRef2 = ref<any>()
    const formData1: Ref<any> = ref({
        account: '',
        password: '',
        captcha: '',
    })
    const formData2: Ref<any> = ref({
        account: '',
        password: '',
        captcha: '',
        phone: '',
    })
    const rules1 = reactive<any>({
        account: [
            { 
                required: true, 
                message: '请输入账号！', 
                trigger: 'blur' 
            },
        ],
        password: [
            { 
                required: true, 
                message: '请输入密码！', 
                trigger: 'blur' 
            },
        ],
        captcha: [
            { 
                required: true, 
                message: '请输入验证码！', 
                trigger: 'blur' 
            },
        ],
    })
    const rules2 = reactive<any>({
        account: [
            { 
                required: true, 
                message: '请输入账号！', 
                trigger: 'blur' 
            },
        ],
        password: [
            { 
                required: true, 
                message: '请输入密码！', 
                trigger: 'blur' 
            },
        ],
        captcha: [
            { 
                required: true, 
                message: '请输入验证码！', 
                trigger: 'blur' 
            },
        ],
        phone: [
            { 
                required: true, 
                message: '请输入手机号！', 
                trigger: 'blur' 
            },
            { 
                validator: (rule: any, value: any, callback: any) => {
                    if (isPhone(value)) {
                        callback()
                    } else {
                        callback(new Error('手机号有误！'))
                    }
                },
                trigger: 'blur' 
            },
        ],
    })
    const onSubmit1 = (formEl: any) => {
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            console.log(valid)
            console.log(fields)
            if (valid) {
                console.log('submit!')
                store.openid = '1'
                if (route.query.redirect) {
                    router.replace(route.query.redirect as string)
                } else {
                    router.replace('/')
                }
            } else {
                console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }
    const onSubmit2 = (formEl: any) => {
        if (!formEl) return;
        formEl.validate((valid, fields) => {
            console.log(valid)
            console.log(fields)
            if (valid) {
                console.log('submit!')
                store.openid = '1'
                if (route.query.redirect) {
                    router.replace(route.query.redirect as string)
                } else {
                    router.replace('/')
                }
            } else {
                console.log('error submit!')
                ElMessage({
                    message: fields[Object.keys(fields)[0]][0].message,
                    type: 'warning',
                })
            }
        })
    }
    const getCaptcha = () => {
        let num = 60
        captchaText.value = num + 's'
        let interval = setInterval(() => {
            captchaText.value = --num + 's'
            if (num <= 0) {
                captchaText.value = '获取验证码'
                clearInterval(interval)
            }
        }, 1000)
        // 调接口
    }
    
</script>

<style lang="scss" scoped>
    // .home::after {
    //     content: '';
    //     position: absolute;
    //     left: 0;
    //     top: 0;
    //     z-index: -1;
    //     width: 100vw;
    //     height: 100vh;
    //     background-image: url('@/assets/avatar/bg8.png');
    //     background-size: 100% 100%;
    //     filter: blur(5px);
    // }
    .home {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background: url('@/assets/img/bg/bg-2.png');
        background-size: 100% 100%;
        background-color: #fff;
    }
    .box {
        background-color: rgba(255, 255, 255, 0.1);
        width: 550px;
        height: 500px;
        box-sizing: border-box;
        padding: 40px;
        border-radius: 10px;
        position: absolute;
        right: 200px;
        top: 200px;
        color: #fff;
        text-align: left;
        .box-text-1 {
            font-size: 40px;
            font-weight: bold;
            padding: 10px 0;
        }
        .box-text-2 {
            font-size: 26px;
            padding: 10px 0;

        }
        .login-text-box {
            display: flex;
            .login-text {
                margin: 10px;
                color: #577aff;
                cursor: pointer;
            }
        }
        
    }
</style>